<template>
  <n-space>
    <n-text> {{ title }} </n-text>
    <!-- <n-button v-show="!focus" secondary size="tiny"  @click="handleFocus">
        <span class="title">
          {{ title }}
        </span>
      </n-button>
     -->

    <n-input
      v-show="focus"
      ref="inputInstRef"
      size="small"
      type="text"
      maxlength="16"
      show-count
      placeholder="请输入项目名称"
      v-model:value.trim="title"
      @keyup.enter="handleBlur"
      @blur="handleBlur"
    ></n-input>
  </n-space>
</template>

<script setup lang="ts">
import { ref, nextTick, computed, onMounted } from 'vue'
import { fetchRouteParamsLocation, setTitle, setSessionStorage } from '@/utils'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
import { icon } from '@/plugins'
import { getProject, getDesignModelContent } from '@/api/screen'
const { FishIcon } = icon.ionicons5
const chartEditStore = useChartEditStore()

import { useSync } from '@/views/chart/hooks/useSync.hook'
const { updateComponent } = useSync()

const focus = ref<boolean>(false)
const inputInstRef = ref(null)

// 根据路由 id 参数获取项目信息
// const fetchProhectInfoById = () => {
//   const id = fetchRouteParamsLocation()
//   if (id.length) {
//     getProject({ sid: id }).then(res => {
//       return res.data.projectName
//     })
//   }
//   return ''
// }

const title = ref<string>('')
const designModelSid = ref<string>('')
onMounted(async () => {
  try {
    const id = fetchRouteParamsLocation()
    const res = await getProject({ sid: id })

    if (res.code === 200) {
      //设置标题
      title.value = res.data.pageName
      designModelSid.value = res.data.designModelSid
      setSessionStorage('projectInfo', res.data)
      setTitle(`设计-${title.value}`)
      // chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PROJECT_NAME, title.value)
      // chartEditStore.setEditCanvasConfig('designModelSid', res.data.designModelSid)
      //获取内容
      const model = await getDesignModelContent({ sid: res.data.designModelSid })
      console.log('model', model)
      if (model.code === 200) {
        //设置内容
        updateComponent(model.data.content, true)
      }
    } else {
      console.error('Failed to fetch data')
    }
  } catch (error) {
    console.error('Error fetching data:', error)
  }
})

const handleFocus = () => {
  focus.value = true
  nextTick(() => {
    inputInstRef.value && (inputInstRef.value as any).focus()
  })
}

const handleBlur = () => {
  focus.value = false
}
</script>
<style lang="scss" scoped>
.title {
  padding-left: 5px;
  padding-right: 5px;
  font-size: 15px;
}
</style>
